<!-- 1 脚本 -->
<script lang="ts" setup name="NavMenu">
import { useUserInfoStore } from '@/stores/useUserInfoStore'
const userInfoStore = useUserInfoStore()

/**
 * 获取用户权限菜单
 */
const userRouters = userInfoStore.userRouters
</script>

<!-- 2 模板 -->
<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#1F2D3D"
    class="el-menu-vertical-demo"
    router
    unique-opened
    text-color="#fff"
  >
    <el-sub-menu v-for="router in userRouters" :index="router.path">
      <template #title>
        <span>{{ router.meta.title }}</span>
      </template>

      <el-menu-item v-for="childRouter in router.children" :index="childRouter.path">{{
        childRouter.meta.title
      }}</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<!-- 3 样式 -->
<style scoped></style>
